Add omniauth_button() and use some Sass tricks for DRY.
Akinori MUSHA
3 changed files with 26 additions and 16 deletions
+ 18
- 15
app/assets/stylesheets/application.css.scss.erb
@@ -241,7 +241,22 @@ h2 .scenario, a span.label.scenario {
|
||
| 241 | 241 |
width: 200px; |
| 242 | 242 |
} |
| 243 | 243 |
|
| 244 |
-.btn-auth {
|
|
| 244 |
+$services: twitter 37signals github; |
|
| 245 |
+$service-colors: #55acee #8fc857 #444; |
|
| 246 |
+ |
|
| 247 |
+@mixin services {
|
|
| 248 |
+ @each $service in $services {
|
|
| 249 |
+ $i: index($services, $service); |
|
| 250 |
+ $service-color: nth($service-colors, $i); |
|
| 251 |
+ |
|
| 252 |
+ &.service-#{$service} {
|
|
| 253 |
+ color: #fff; |
|
| 254 |
+ background-color: $service-color; |
|
| 255 |
+ } |
|
| 256 |
+ } |
|
| 257 |
+} |
|
| 258 |
+ |
|
| 259 |
+.btn-service {
|
|
| 245 | 260 |
position: relative; |
| 246 | 261 |
padding-left: 40px; |
| 247 | 262 |
$border-color: rgba(0,0,0,0.2); |
@@ -260,18 +275,6 @@ h2 .scenario, a span.label.scenario {
|
||
| 260 | 275 |
border-right: 1px solid $border-color; |
| 261 | 276 |
} |
| 262 | 277 |
|
| 263 |
- &.btn-auth-twitter {
|
|
| 264 |
- color: #fff; |
|
| 265 |
- background-color: #55acee; |
|
| 266 |
- } |
|
| 267 |
- |
|
| 268 |
- &.btn-auth-37signals {
|
|
| 269 |
- color: #fff; |
|
| 270 |
- background-color: #8fc857; |
|
| 271 |
- } |
|
| 272 |
- |
|
| 273 |
- &.btn-auth-github {
|
|
| 274 |
- color: #fff; |
|
| 275 |
- background-color: #444; |
|
| 276 |
- } |
|
| 278 |
+ @include services; |
|
| 279 |
+} |
|
| 277 | 280 |
} |
+ 7
- 0
app/helpers/application_helper.rb
@@ -53,4 +53,11 @@ module ApplicationHelper |
||
| 53 | 53 |
def omniauth_provider_name(provider) |
| 54 | 54 |
t("devise.omniauth_providers.#{provider}")
|
| 55 | 55 |
end |
| 56 |
+ |
|
| 57 |
+ def omniauth_button(provider) |
|
| 58 |
+ link_to [ |
|
| 59 |
+ omniauth_provider_icon(provider), |
|
| 60 |
+ content_tag(:span, "Authenticate with #{omniauth_provider_name(provider)}")
|
|
| 61 |
+ ].join.html_safe, user_omniauth_authorize_path(provider), class: "btn btn-default btn-service service-#{provider}"
|
|
| 62 |
+ end |
|
| 56 | 63 |
end |
+ 1
- 1
app/views/services/index.html.erb
@@ -12,7 +12,7 @@ |
||
| 12 | 12 |
for guidance. |
| 13 | 13 |
</p> |
| 14 | 14 |
<%- Devise.omniauth_providers.each { |provider| -%>
|
| 15 |
- <p><%= link_to user_omniauth_authorize_path(provider), class: "btn btn-default btn-auth btn-auth-#{provider}" do %><%= icon_for_service(provider) %><span>Authenticate with <%= t("devise.omniauth_providers.#{provider}") %></span><% end %></p>
|
|
| 15 |
+ <p><%= omniauth_button(provider) %></p> |
|
| 16 | 16 |
<%- } -%> |
| 17 | 17 |
<hr> |
| 18 | 18 |
|